<template>
	<view class="login-page padding20" :style="{'height':`calc(100vh - ${barHeight}px)`,'background-image': `url(${Http_url}/static/images/login_bg.png)`}">
		<view class="content padding20" style="margin-top: 10%;">
			<view class="midbox radius14 bgWhite" style="margin-bottom: 50rpx;">
				<view class="title font_medium blod600 size18 paddingt10" style="text-align: center;">绑定手机号</view>
				<view class="tip hui size12 paddingt10" style="text-align: center;">为了你的账户安全，请完善账户信息</view>
				<view class="telbox item margint20">
					<input class="radius8 bgHui padding20 font_medium size15" type='number' name='tel' v-model="phone" maxlength="11" placeholder="请输入手机号"></input>
				</view>
				<view class="codebox item acea-row row-between-wrapper">
					<input class="code radius8 bgHui padding20 font_medium size15" type='number' name='code' v-model="code" maxlength="6" placeholder="输入验证码"></input>
					<button class="getcode white size15 bgYellow" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="getcode">{{text}}</button>
				</view>
			</view>
			<view class="bottom paddingl20">
				<view class="btn-box">
					<button class="btn btn-bg white acea-row row-center-wrapper" @click="editPwd">
						<text class="size18">确认绑定</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import {getCode,EidtCode} from "@/api/user.js"
	import {Http_url} from '@/config/config.js'
	
	export default {
		computed: mapGetters(['globalData']),
		data() {
			return {
				Http_url:Http_url,
				barHeight:0,
				phone:'',
				code:'',
				timer:'',
				nums: 60,
				text: '发送验证码',
				disabled:false
			};
		},
		onLoad() {
			this.barHeight=this.globalData.barHeight
		},
		methods:{
			getTimes(){
				this.nums = this.nums - 1;
				this.text = this.nums + "s" + "重新发送";
				if (this.nums < 0) {
				  clearInterval(this.timer);
				}
				this.text = this.nums + "s" + "重新发送";
				if (this.nums < 0) {
				  this.disabled = false;
				  this.text = "重新获取";
				}
			},
			editPwd: function() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				if (!that.code) return that.$util.Tips({
					title: '请填写验证码'
				});
				uni.showModal({
					title: '是否绑定账号',
					confirmText: '绑定',
					success(res) {
						if (res.confirm) {
							EidtCode({
								phone: that.phone,
								code: that.code
							}).then(res => {
								return that.$util.Tips({
									title: res.message,
									icon: 'success'
								}, {
									tab: 5,
									url: '/pages/group/index/index'
								});
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						} else if (res.cancel) {
							return that.$util.Tips({
								title: '您已取消绑定！'
							}, {
								tab: 5,
								url: '/pages/user/user-tel'
							});
						}
					}
				});
			},
			/**
			 * 发送验证码
			 * 
			 */
			async getcode() {
				this.nums = 60;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				await getCode(that.phone).then(res => {
					that.$util.Tips({
						title: res.message
					});					
					that.timer = setInterval(that.getTimes, 1000);
					 that.disabled = true;
					 uni.hideLoading();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
					uni.hideLoading();
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.login-page{
		width: 100%;
		height: 100vh;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		.midbox{
			padding: 40rpx;
		}
		.item{
			input{
				height: 100rpx;
			}
			.code{
				width: 62%;
			}
			.getcode{
				height: 100rpx;
				line-height: 100rpx;
				border: none !important;
				margin-right: 0 !important;
			}
			.on{
				background-color: #D1D1D1;
			}
		}
		.btn{
			height: 110rpx;
		}
	}
	/deep/.uni-input-input{
		font-weight: 600 !important;
	}
	/deep/uni-button:after{
		border:none !important;
		border-radius:16rpx !important
	}
</style>